{% extends 'base_generic.html' %}
{% load i18n %}

{% block content %}
<div class="container-fluid py-4">
    <h1 class="mb-4">{% translate "Book Statistics" %}</h1>

    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white">{% translate "Book Borrowing Rate" %}</div>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <canvas id="borrowedPieChart"></canvas>
                </div>
                <div class="card-footer text-center">
                    <p class="mb-0">{% translate "Total Books" %}: {{ total_books }}</p>
                    <p class="mb-0">{% translate "Borrowed Books" %}: {{ borrowed_books }}</p>
                    <p class="mb-0">{% translate "Borrowed Percentage" %}: {{ borrowed_percentage }}%</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-success text-white">{% translate "Books by Genre" %}</div>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <canvas id="genreBarChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Data for Borrowed Books Pie Chart
        const totalBooks = {{ total_books }};
        const borrowedBooks = {{ borrowed_books }};
        const availableBooks = totalBooks - borrowedBooks;

        const borrowedLabel = "{% translate "Borrowed" %}";
        const availableLabel = "{% translate "Available" %}";
        const borrowingDistributionTitle = "{% translate "Book Borrowing Distribution" %}";

        const borrowedPieCtx = document.getElementById('borrowedPieChart').getContext('2d');
        new Chart(borrowedPieCtx, {
            type: 'pie',
            data: {
                labels: [borrowedLabel, availableLabel],
                datasets: [{
                    data: [borrowedBooks, availableBooks],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.8)',
                        'rgba(75, 192, 192, 0.8)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: borrowingDistributionTitle
                    }
                }
            }
        });

        // Data for Books by Genre Bar Chart
        const genreLabels = {{ genre_labels|safe }};
        const genreCounts = {{ genre_counts|safe }};

        const numberOfBooksLabel = "{% translate "Number of Books" %}";
        const booksByGenreTitle = "{% translate "Books by Genre" %}";
        const countTitle = "{% translate "Count" %}";
        const genreTitle = "{% translate "Genre" %}";

        const genreBarCtx = document.getElementById('genreBarChart').getContext('2d');
        new Chart(genreBarCtx, {
            type: 'bar',
            data: {
                labels: genreLabels,
                datasets: [{
                    label: numberOfBooksLabel,
                    data: genreCounts,
                    backgroundColor: 'rgba(153, 102, 255, 0.8)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: booksByGenreTitle
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: countTitle
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: genreTitle
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %} 